<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>e-signature</title>
  <script type="text/javascript" src="./lib/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="./lib/jSignature.min.noconflict.js"></script>
  <style type="text/css">
    #signature {
      border: 1px solid #e5e5e5;
      width: fit-content;
    }

    input[data=jSignature-undo] {
      display: none !important;
    }
  </style>
</head>

<body>
  <div id="signature"></div>
  <img id="img">
  <button onclick="clearSig()">重置</button>
  <button onclick="undo()">撤销</button>
  <button onclick="importImg()">获取</button>

  <img id="base" alt="" />

  <script type="text/javascript">
    //初始化画布  
    $(document).ready(function () {
      $("#signature").jSignature({
        height: 300,
        color: "#000", // 笔画颜色
        lineWidth: 8, // 笔画宽度
        UndoButton: true, // 撤销
        signatureLine: false, // 是否显示基准线
        "background-color": "#fff", // 画板背景颜色
        // "decor-color": "#000", // 基准线颜色
        // "cssclass": "", // 定义画布的自定义css类
      });
    })
    //重置画布  
    function clearSig() {
      $("#signature").jSignature("clear");
    }
    //将画布内容显示到IMG  
    function importImg() {
      var sig = $("#signature");
      if (sig.jSignature('getData', 'native').length == 0) {
        alert("请先进行签名");
        return;
      }
      var sigImg = "data:" + sig.jSignature('getData'); // 获取
      $("#img").attr("src", sigImg);
      synthesizer(sigImg, "why.png")
    }
    // 撤销
    function undo() {
      $("#signature").find("input[data=jSignature-undo]").click();
    }

    function synthesizer(sigImg, imgUrl) {
      var myImage = new Image();
      myImage.src = imgUrl; // 背景图片  你自己本地的图片或者在线图片
      myImage.crossOrigin = 'Anonymous';
      myImage.onload = function () {
        var ratio = myImage.width / myImage.height;
        var cw = 750;
        var ch = 750 * ratio;
        // 创建canvas对象
        var canvas = document.createElement("canvas");
        canvas.width = cw;
        canvas.height = ch;
        var context = canvas.getContext("2d");
        context.rect(0, 0, cw, ch);
        context.fillStyle = "#fff";
        context.fill();
        // 画入主图
        context.drawImage(myImage, 0, 0, cw, ch);

        var myImage2 = new Image();
        myImage2.src = sigImg; // 电子签字图片
        myImage2.crossOrigin = 'Anonymous';
        myImage2.onload = function () {
          var scale = 0.2;
          var ew = myImage2.width * scale;
          var eh = myImage2.height * scale;
          var ex = cw - ew; // 左上角横向坐标
          var ey = ch - eh; // 左上角纵向坐标
          // context.fillStyle = "transparent"; // 设置填充的颜色
          // context.fillRect(250, 250, 210, 210); // 绘制填充的矩形
          context.drawImage(myImage2, ex, ey, ew, eh);
          var base64 = canvas.toDataURL("image/png"); // "image/png" 这里注意一下
          $("#base").attr("src", base64);
        }
      }
    }

    // synthesizer("why.png")

    function drawAndShareImage(imgSrc1, imgSrc2) {
      //imgSrc1 背景图片（二维码）链接
      //imgSrc2 小图片（头像）链接
      var canvas = document.createElement("canvas");
      canvas.width = 700;
      canvas.height = 700;
      var context = canvas.getContext("2d");

      context.rect(0, 0, canvas.width, canvas.height);
      context.fillStyle = "#fff";
      context.fill();

      var myImage = new Image();
      myImage.src = imgSrc1; //背景图片  你自己本地的图片或者在线图片
      myImage.crossOrigin = 'Anonymous';

      myImage.onload = () => {
        context.drawImage(myImage, 0, 0, 700, 700);
        var myImage2 = new Image();
        myImage2.src = imgSrc2; //你自己本地的图片或者在线图片
        myImage2.crossOrigin = 'Anonymous';

        myImage2.onload = () => {
          // 设置填充的颜色
          context.fillStyle = "white";
          // 绘制填充的矩形
          context.fillRect(250, 250, 210, 210);
          context.drawImage(myImage2, 260, 260, 190, 190);
          var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
          $("#base").attr("src", base64);
        }
      }
    }

    // drawAndShareImage("why.png", "lm.png")
  </script>
</body>

</html>